import Edit from '../components/AddEdit/Edit.js';
import { studentApi } from '@/services/api-common';
const options = [
	{ text: '男', value: 1 },
	{ text: '女', value: 2 },
];
const optionsCourse = [
	{ text: '语文', value: 1 },
	{ text: '数学', value: 2 },
	{ text: '物理', value: 3 },
];

export default function(midder) {
	return [{
			prop: 'name',
			text: '学生姓名',
			renderItem(type, prop, text) {
				return $Input({
					$name: prop,
					$label: text
				})
			}
		},
		{
			prop: 'sex',
			text: '学生性别',
			renderItem(type, prop, text) {
				return $Select({
					$name: prop,
					$label: text,
					$options: options
				})
			},
			render({ row }) {
				const v = options.find(v => v.value === row.sex);
				return v && v.text;
			}
		},
		{
			prop: 'age',
			text: '学生年龄',
			renderItem(type, prop, text) {
				return $InputNumber({
					$label: text,
					$name: {
						config: {
							inputField: prop,
							inputDone: val => val ? val : null
						}
					}
				})
			}
		},
		{
			prop: 'courses',
			text: '所学课程',
			renderItem(type, prop, text) {
				return $Select({
					$name: {
						config: {
							inputField: prop,
							outputDone: (arr, values) => {
								if (!arr) return null;
								values[`${prop}_text`] = arr
									.map(v => optionsCourse.find(opt => opt.value === v).text)
									.join();
								return arr.join();
							}
						}
					},
					$label: text,
					multiple: true,
					$options: optionsCourse
				})
			},
			render: ({ row }) => row['courses_text']
		},
		{
			prop: 'stageRange',
			text: '课程阶段',
			renderItem(type, prop, text) {
				const format = 'YYYY-MM-DD';
				return $DatePicker({
					format,
					// 初始值为Date对象才可指定value-format属性
					'value-format': format,
					type: 'daterange',
					$label: text,
					$name: {
						config: [
							{ inputField: 'startDate', inputDone: (v) => v || null },
							{ inputField: 'endDate', inputDone: (v) => v || null }
						]
					}
				})
			},
			render({ row }) {
				const { startDate, endDate } = row;
				return (startDate && endDate) ? `${startDate} 至 ${endDate}` : '-';
			}
		},
		{
			prop: 'classHours',
			text: '单日课时',
			renderItem(type, prop, text) {
				const format = 'HH:mm';
				return $TimePicker({
					format,
					isRange: true,
					$label: text,
					'value-format': format,
					$name: {
						config: [
							{ inputField: 'startTime', inputDone: (v) => v || null },
							{ inputField: 'endTime', inputDone: (v) => v || null },
						]
					}
				})
			},
			render({ row }) {
				const { startTime, endTime } = row;
				return (startTime && endTime) ? `${startTime} 至 ${endTime}` : '-';
			}
		},
		{
			prop: 'action',
			width: '200px',
			text: '操作',
			fixed: 'right',
			render({ row }) {
				return {
					is: 'ActionButtons',
					buttons: [{
						text: '详情',
						type: 'success',
						tip: '查看本条数据',
						onClick: async () => {
							const data = await studentApi.detail({ id: row.id });
							console.log('本条数据的完整信息：', data);
						}
					}, {
						text: '编辑',
						type: 'primary',
						tip: '修改本条数据',
						onClick: async () => {
							midder.open(Edit, async (data, close) => {
								await studentApi.edit(data, row.id);
							}, {
								record: row,
								type: 'edit',
								param: { class: 'no-padding' },
							});
						}
					}, {
						text: '删除',
						type: 'danger',
						pop: '确定删除？',
						onClick: async () => {
							await studentApi.delete({ id: row.id });
							this.$msg('操作成功');
							midder.table.reload();
						}
					}]
				}
			}
		}
	]
}